<!--
 * @author: sanbao
 * @Date: 2022-08-04 21:58:15
-->
<style lang='scss' scoped>
.collect {
  .top {
    background-color: rgb(237, 219, 219);
    border-bottom: 4px solid #ed712e;
    height: 44px;
    line-height: 44px;
  }
}
</style>

<template>
  <div class="collect">
    <div class="top">
      <div class="banxin_center">我的收藏</div>
    </div>

    <div class="banxin_center">
      <my-data :list="collectList" :delete="true" @del="del"></my-data>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed, onMounted } from "vue";
import ShopModel from "@/api/shop";
import MyData from "@/components/child/MyData.vue";
import { ElNotification, ElMessageBox } from "element-plus";
export default {
  components: { MyData },
  setup() {
    onMounted(() => {
      getCollect();
    });
    const data = reactive({
      collectList: [],
    });
    const getCollect = async () => {
      const response = await ShopModel.getCollect({ user_id: 9557 });
      if (response.data.code == "001") {
        data.collectList = response.data.collectList;
        console.log(data.collectList);
      }
    };
    const del = (id) => {
      ElMessageBox.confirm("你确定要删除吗？？？？？", "Warning", {
        confirmButtonText: "是的",
        cancelButtonText: "不了",
        type: "warning",
      })
        .then(async () => {
          let datass = {
            product_id: id,
            user_id: 9557,
          };
          const response = await ShopModel.deleteCollect(datass);
          if (response.data.code == "001") {
            ElNotification.success(response.data.msg);
            getCollect();
          } else {
            ElNotification.success(response.data.msg);
          }
        })
        .catch(() => {
          ElNotification.error("已取消删除");
        });
    };
    return {
      ...toRefs(data),
      del,
    };
  },
};
</script>
